<template>
	<div class="w100 h100 position-relative">
		<three class="three" :type="activeName" />
		<div class="left flex-col">
			<my-box class="flex-col m-b-10" title="生产辅助系统告警">
				<div class="flex m-t-10">
					<div class="f1 w0 birth" v-for="item in birthList.slice(0, 4)" :key="item.name">
						<img class="birth-img" :src="getImgUrl(`MakeDecision/${item.img}`)" alt="" />
						<div class="birth-val">
							<span class="f-s-18 m-r-4">{{ item.val }}</span
							>个告警
						</div>
						<span class="birth-name"> {{ item.name }}</span>
					</div>
				</div>
			</my-box>
			<!-- 井下人员信息 -->
			<personnel
				class="f1 h0 m-b-10"
				:data="personnelData.workerData"
				:total="personnelData.workerTotal"
				:fileType="{
					name: 'systemName',
					value: 'workerCount'
				}"
			/>
			<!-- 告警信息 -->
			<giveAlarm class="flex-col f1 h0" :list="giveAlarmList" />
		</div>
		<div class="right flex-col">
			<my-box class="flex-col m-b-10" title="生产辅助系统告警">
				<div class="flex m-t-10 tc">
					<div class="f1 w0 birth" v-for="item in birthList.slice(4)" :key="item.name">
						<img class="birth-img" :src="getImgUrl(`MakeDecision/${item.img}`)" alt="" />
						<div class="birth-val">
							<span class="f-s-18 m-r-4">{{ item.val }}</span
							>个告警
						</div>
						<span class="birth-name"> {{ item.name }}</span>
					</div>
				</div>
			</my-box>
			<position class="flex-col f1 h0" :list="positionList"></position>
		</div>
	</div>
</template>

<script setup name="/index">
import three from '../../comprehensive/home/three.vue'
import personnel from '../components/personnel.vue'
import giveAlarm from '../components/giveAlarm.vue'
import position from '../components/position.vue'

import { alarmCount, workerCount, alarmInfo, workerInfo } from '@a/make-decision-scheduling'

// 生产辅助系统告警
let birthList = ref([
	{ name: '通风系统', val: 0, img: '通风系统.png' },
	{ name: '排水系统', val: 0, img: '排水系统.png' },
	{ name: '压风系统', val: 0, img: '压风系统.png' },
	{ name: '安全监测浓度', val: 0, img: '安全监测浓度.png' },

	{ name: '顶板监测', val: 0, img: '顶板监测.png' },
	{ name: '矿压监测', val: 0, img: '矿压监测.png' },
	{ name: '水文监测', val: 0, img: '水文监测.png' },
	{ name: '微震监测', val: 0, img: '微震监测.png' }
])
alarmCount().then((res) => {
	res.data.forEach((item) => {
		birthList.value.forEach((item2) => {
			if (item.subsystemName === item2.name) item2.val = item.alarmCount
		})
	})
})

/*******************************************井下人员信息************************/
let personnelData = ref({})
workerCount().then((res) => {
	personnelData.value = res.data
})

/*******************************************告警信息************************/
let giveAlarmList = ref([])
alarmInfo().then((res) => {
	giveAlarmList.value = res.data
})

/*************************************** 人员位置查询 ********************************/
let positionList = ref([])
function workerInfoFn() {
	workerInfo().then((res) => {
		positionList.value = res.data
	})
}
workerInfoFn()
</script>

<style scoped lang="scss">
.left {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	padding: 26px 0 10px 10px;
	background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0) 100%);
	z-index: 2;
	box-sizing: border-box;
	height: 100%;
}
.right {
	position: absolute;
	top: 0;
	right: 0;
	width: 400px;
	padding: 26px 10px 10px 0;
	background: linear-gradient(270deg, #0d1018 0%, rgba(13, 16, 24, 0) 100%);
	z-index: 2;
	box-sizing: border-box;
	height: 100%;
}

.birth {
	text-align: center;
	&-img {
		width: 60px;
	}
	&-val {
		color: rgba(62, 127, 255, 1);
		font-size: 12px;
	}
	&-name {
		color: rgba(208, 241, 252, 1);
		font-size: 12px;
	}
}
</style>
